<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:acm="http://java.sun.com/jsf/composite/comp">
<ui:composition template="/templates/baseLayout.xhtml">
	<ui:define name="body">
		<section id="content">
			<h:form id="CatalogListForm" prependId="false">
				<h:panelGrid styleClass="wrapper" width="100%">
			    	<h:panelGrid columns="3" width="100%" columnClasses="fleft, fleft, fleft">
			    		<rich:panel id="Makes" header="Makes" styleClass="threeColBlock">
			    			<div id="manageCatalog">
			    				<rich:list id="MakesList" var="make" value="#{ctlCtrl.makesForCatList}" rowKeyVar="stat" type="unordered"
									onrowmouseover="document.getElementById('MakesList:#{stat}:Editor').style.visibility='visible';"
									onrowmouseout="document.getElementById('MakesList:#{stat}:Editor').style.visibility='hidden';">
									<h:panelGroup id="Editor" styleClass="fright" style="visibility: hidden;" rendered="#{make.persistent}">
										<a4j:commandButton image="/images/icons/save.gif" actionListener="#{ctlCtrl.submitMake}" 
											render="Makes" rendered="#{make.editable}" title="Save" execute="UpdateMake">
											<f:setPropertyActionListener value="false" target="#{make.editable}" />																						
										</a4j:commandButton>
										<acm:spacer width="10"/>
										<a4j:commandButton image="/images/icons/cancel.gif" render="Makes" 
											rendered="#{make.editable}" title="Cancel" immediate="true" execute="@this">
											<f:setPropertyActionListener value="false" target="#{make.editable}" />																						
										</a4j:commandButton>
										
										<a4j:commandButton image="/images/icons/edit.gif" render="Makes" rendered="#{!make.editable}" 
											title="Modify" execute="@this" immediate="true">
											<f:setPropertyActionListener value="#{make}" target="#{ctlCtrl.make}" />
											<f:setPropertyActionListener value="true" target="#{make.editable}" />																						
										</a4j:commandButton>
										<acm:spacer width="10"/>
										<a4j:commandButton image="/images/icons/trash.png" oncomplete="#{rich:component('MakeDelPopup')}.show();" 
											rendered="#{!make.editable}" title="Delete">
											<f:setPropertyActionListener value="#{make}" target="#{ctlCtrl.make}" />
										</a4j:commandButton>											
									</h:panelGroup>
									<h:panelGroup id="group">
										<rich:inplaceInput id="NewMake" showControls="true" defaultLabel="Click here to add a new Make"  
					                		value="#{make.name}" rendered="#{!make.persistent}">
					                		<a4j:ajax event="change" render="Makes,Models,Styles" listener="#{ctlCtrl.submitMakeFromList}"/>
					                	</rich:inplaceInput>
					                	<h:inputText id="UpdateMake" value="#{make.name}" rendered="#{make.editable}" />
										<a4j:commandLink id="SelectMake" value="#{make.name}" render="Makes,Models,Styles"
											styleClass="#{ctlCtrl.make.name == make.name ? 'active' : ''}" rendered="#{make.persistent and !make.editable}">
											<f:setPropertyActionListener value="#{make}" target="#{ctlCtrl.make}" />
											<f:setPropertyActionListener value="" target="#{ctlCtrl.model}" />
										</a4j:commandLink>										
				                	</h:panelGroup>																		
								</rich:list>								
							</div>
			    		</rich:panel>
			    		<rich:panel id="Models" header="Models" styleClass="threeColBlock">
			    			<div id="manageCatalog">
								<rich:list id="ModelsList" var="model" value="#{ctlCtrl.make.modelsForCatList}" rowKeyVar="stat" type="unordered"
									onrowmouseover="document.getElementById('ModelsList:#{stat}:Editor').style.visibility='visible';"
									onrowmouseout="document.getElementById('ModelsList:#{stat}:Editor').style.visibility='hidden';">
									<h:panelGroup id="Editor" styleClass="fright" style="visibility: hidden;" rendered="#{model.persistent}">
										<a4j:commandButton image="/images/icons/save.gif" actionListener="#{ctlCtrl.submitModel}" 
											render="Models" rendered="#{model.editable}" title="Save" execute="UpdateModel">
											<f:setPropertyActionListener value="false" target="#{model.editable}" />																						
										</a4j:commandButton>
										<acm:spacer width="10"/>
										<a4j:commandButton image="/images/icons/cancel.gif" render="Models" 
											rendered="#{model.editable}" title="Cancel" immediate="true" execute="@this">
											<f:setPropertyActionListener value="false" target="#{model.editable}" />																						
										</a4j:commandButton>
										
										<a4j:commandButton image="/images/icons/edit.gif" rendered="#{!model.editable}"
											execute="@this" immediate="true" title="Modify" render="Models">
											<f:setPropertyActionListener value="#{model}" target="#{ctlCtrl.model}" />
											<f:setPropertyActionListener value="true" target="#{model.editable}" />	
										</a4j:commandButton>
										<acm:spacer width="10"/>
										<a4j:commandButton image="/images/icons/trash.png" rendered="#{!model.editable}" 
											oncomplete="#{rich:component('ModelDelPopup')}.show();" title="Delete">
											<f:setPropertyActionListener value="#{model}" target="#{ctlCtrl.model}" />
										</a4j:commandButton>										
									</h:panelGroup>
									<rich:inplaceInput id="NewModel" showControls="true" defaultLabel="Click here to add new Model for #{ctlCtrl.make.name}"  
				                		value="#{model.name}" rendered="#{!model.persistent}">
				                		<a4j:ajax event="change" render="Models,Styles" listener="#{ctlCtrl.submitModelFromList}"/>
				                	</rich:inplaceInput>
				                	<h:inputText id="UpdateModel" value="#{model.name}" rendered="#{model.editable}" />
									<a4j:commandLink id="SelectModel" value="#{model.name}" render="Models,Styles" 
										styleClass="#{ctlCtrl.model.name == model.name ? 'active' : ''}" rendered="#{model.persistent and !model.editable}">
										<f:setPropertyActionListener value="#{model}" target="#{ctlCtrl.model}" />
									</a4j:commandLink>									
								</rich:list>
							</div>
			    		</rich:panel>
			    		<rich:panel id="Styles" header="Styles" styleClass="threeColBlock">
			    			<div id="manageCatalog">
								<rich:list id="StylesList" var="style" value="#{ctlCtrl.model.stylesForCatList}" rowKeyVar="stat" type="unordered"
									onrowmouseover="document.getElementById('StylesList:#{stat}:Editor').style.visibility='visible';"
									onrowmouseout="document.getElementById('StylesList:#{stat}:Editor').style.visibility='hidden';">
									<h:panelGroup id="Editor" styleClass="fright" style="visibility: hidden;" rendered="#{style.persistent}">
										<a4j:commandButton image="/images/icons/save.gif" actionListener="#{ctlCtrl.submitStyle}" 
											render="Styles" rendered="#{style.editable}" title="Save" execute="UpdateStyle">
											<f:setPropertyActionListener value="false" target="#{style.editable}" />																						
										</a4j:commandButton>
										<acm:spacer width="10"/>
										<a4j:commandButton image="/images/icons/cancel.gif" render="Styles" 
											rendered="#{style.editable}" title="Cancel" immediate="true" execute="@this">
											<f:setPropertyActionListener value="false" target="#{style.editable}" />																						
										</a4j:commandButton>
										
										<a4j:commandButton image="/images/icons/edit.gif" rendered="#{!style.editable}" 
											title="Modify" execute="@this" immediate="true" render="Styles">
											<f:setPropertyActionListener value="#{style}" target="#{ctlCtrl.style}" />
											<f:setPropertyActionListener value="true" target="#{style.editable}" />	
										</a4j:commandButton>
										<acm:spacer width="10"/>
										<a4j:commandButton image="/images/icons/trash.png" rendered="#{!style.editable}"  
											oncomplete="#{rich:component('StyleDelPopup')}.show();">
											<f:setPropertyActionListener value="#{style}" target="#{ctlCtrl.style}" />
										</a4j:commandButton>										
									</h:panelGroup>
									<rich:inplaceInput id="NewStyle" showControls="true" defaultLabel="Click here to add new Style for #{ctlCtrl.model.name}"  
				                		value="#{style.name}" rendered="#{!style.persistent}">
				                		<a4j:ajax event="change" render="Styles" listener="#{ctlCtrl.submitStyleFromList}"/>
				                	</rich:inplaceInput>
				                	<h:inputText id="UpdateStyle" value="#{style.name}" rendered="#{style.editable}" />
				                	<a4j:commandLink id="SelectStyle" value="#{style.name}" render="Styles" 
										styleClass="#{ctlCtrl.style.name == style.name ? 'active' : ''}" rendered="#{style.persistent and !style.editable}">
										<f:setPropertyActionListener value="#{style}" target="#{ctlCtrl.style}" />
									</a4j:commandLink>									
								</rich:list>
							</div>
			    		</rich:panel>
			    	</h:panelGrid>
			    </h:panelGrid>	
			</h:form>			        	            
	    </section>
	    <h:form id="CatEditForm" prependId="false">	
	    	<rich:popupPanel id="MakeDelPopup" modal="true" autosized="true" domElementAttachment="parent">
				<h:panelGrid width="100%" styleClass="centerAlign" columnClasses="col-padding">
					<h:outputText value="Are you sure, you want to delete this Make?" />
					<h:outputText value="This would also delete all its corresponding Models and Styles." />
					<br/>
					<h:panelGroup>
						<a4j:commandButton styleClass="button1" value="Delete" action="#{ctlCtrl.deleteMake}" immediate="true"
							oncomplete="#{rich:component('MakeDelPopup')}.hide();" execute="@this" render="CatalogListForm">
				        </a4j:commandButton>
				        <acm:spacer width="10px;"/>
				        <a4j:commandButton styleClass="button1" value="Cancel" onclick="#{rich:component('MakeDelPopup')}.hide();" immediate="true">				            
				        </a4j:commandButton>
			        </h:panelGroup>			        				
				</h:panelGrid>
			</rich:popupPanel>
			<rich:popupPanel id="ModelDelPopup" modal="true" autosized="true" domElementAttachment="parent">
				<h:panelGrid width="100%" styleClass="centerAlign" columnClasses="col-padding, col-padding">
					<h:outputText value="Are you sure, you want to delete this Model?" />
					<h:outputText value="This would also delete all its corresponding Styles." />
					<br/>
					<h:panelGroup>
						<a4j:commandButton styleClass="button1" value="Delete" action="#{ctlCtrl.deleteModel}" 
							oncomplete="#{rich:component('ModelDelPopup')}.hide();" render="Models,Styles">
				        </a4j:commandButton>
				        <acm:spacer width="10px;"/>
				        <a4j:commandButton styleClass="button1" value="Cancel" onclick="#{rich:component('ModelDelPopup')}.hide();" immediate="true">				            
				        </a4j:commandButton>
			        </h:panelGroup>			        				
				</h:panelGrid>
			</rich:popupPanel>
			<rich:popupPanel id="StyleDelPopup" modal="true" autosized="true" domElementAttachment="parent">
				<h:panelGrid width="100%" styleClass="centerAlign" columnClasses="col-padding, col-padding">
					<h:outputText value="Are you sure, you want to delete this Style?" />										
					<br/>
					<h:panelGroup>
						<a4j:commandButton styleClass="button1" value="Delete" action="#{ctlCtrl.deleteStyle}" 
							oncomplete="#{rich:component('StyleDelPopup')}.hide();" render="Styles">
				        </a4j:commandButton>
				        <acm:spacer width="10px;"/>
				        <a4j:commandButton styleClass="button1" value="Cancel" onclick="#{rich:component('StyleDelPopup')}.hide();" immediate="true">				            
				        </a4j:commandButton>
			        </h:panelGroup>			        				
				</h:panelGrid>
			</rich:popupPanel>
		</h:form>
	</ui:define>
</ui:composition>     
</html>   	